import { createSlice } from "@reduxjs/toolkit";

type sliceType = {
  tabs: {
    logo: string;
    header: string;
    urls: string[];
    currentURLIndex: number;
    backward: boolean;
    forward: boolean;
  }[];
  activedTabIndex: number;
  staredWebs: {
    logo: string;
    header: string;
    urls: string[];
    currentURLIndex: number;
    backward: boolean;
    forward: boolean;
  }[];
};

const initialState: sliceType = {
  tabs: [
    {
      logo: "https://upload.wikimedia.org/wikipedia/commons/0/09/IOS_Google_icon.png",
      header: "Google",
      urls: ["https://www.google.com/?igu=1"],
      currentURLIndex: 0,
      backward: false,
      forward: false,
    },
  ],
  activedTabIndex: 0,
  staredWebs: [
    {
      logo: "https://upload.wikimedia.org/wikipedia/commons/0/09/IOS_Google_icon.png",
      header: "Google",
      urls: ["https://www.google.com/?igu=1"],
      currentURLIndex: 0,
      backward: false,
      forward: false,
    },
    {
      logo: "",
      header: "Github",
      urls: ["https://github.com/vito-mohagheghian/wins-11"],
      currentURLIndex: 0,
      backward: false,
      forward: false,
    },
    {
      logo: "https://vito-dev.ir/_next/static/media/v-icon.794f9f25.svg",
      header: "Vito Mohagheghian",
      urls: ["https://vito-dev.ir"],
      currentURLIndex: 0,
      backward: false,
      forward: false,
    },
    {
      logo: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6b61CNVBi57OFfU9LY6XPY9toX9Em20M-8w&usqp=CAU",
      header: "Coffee be de (Support)",
      urls: ["https://www.coffeebede.com/vitomohagheghian"],
      currentURLIndex: 0,
      backward: false,
      forward: false,
    },
  ],
};

const edgeAppSlice = createSlice({
  name: "edge",
  initialState,
  reducers: {
    changeTabHandler: (state, action) => {
      const newIndex = action.payload;

      state.activedTabIndex = newIndex;
    },
    newTabHandler: (state) => {
      state.tabs.push({
        logo: "",
        header: "New tab",
        urls: ["https://www.google.com/?igu=1"],
        currentURLIndex: 0,
        backward: false,
        forward: false,
      });
      state.activedTabIndex = state.tabs.length - 1;
    },
    newBlankTabHandler: (state, action) => {
      const url = action.payload;

      state.tabs.push({
        logo: "",
        header: "New tab",
        urls: [url],
        currentURLIndex: 0,
        backward: false,
        forward: false,
      });

      state.activedTabIndex = state.tabs.length - 1;
    },
    closeTab: (state, action) => {
      const tabIndex = action.payload;
      if (state.tabs.length > 1 && state.tabs[tabIndex - 1]) {
        state.activedTabIndex = tabIndex - 1;
        console.log(tabIndex);
      } else {
        state.activedTabIndex = 0;
      }

      state.tabs.splice(tabIndex, 1);
    },
    changeUrlHandler: (state, action) => {
      let newURL = action.payload;

      if (
        newURL.slice(0, 8) !== "https://" &&
        newURL.slice(0, 7) !== "http://"
      ) {
        newURL = "https://" + newURL;
      }

      state.tabs[state.activedTabIndex].urls.push(newURL);

      state.tabs[state.activedTabIndex].currentURLIndex =
        state.tabs[state.activedTabIndex].urls.length - 1;

      state.tabs[state.activedTabIndex].backward = true;
      state.tabs[state.activedTabIndex].forward = false;
    },
    backwardHandler: (state) => {
      if (state.tabs[state.activedTabIndex].currentURLIndex >= 1) {
        state.tabs[state.activedTabIndex].forward = true;

        state.tabs[state.activedTabIndex].currentURLIndex--;

        if (state.tabs[state.activedTabIndex].currentURLIndex < 1) {
          state.tabs[state.activedTabIndex].backward = false;
        }
      }
    },
    forwardHandler: (state) => {
      if (
        state.tabs[state.activedTabIndex].currentURLIndex <
        state.tabs[state.activedTabIndex].urls.length - 1
      ) {
        state.tabs[state.activedTabIndex].backward = true;

        state.tabs[state.activedTabIndex].currentURLIndex++;

        if (
          state.tabs[state.activedTabIndex].currentURLIndex ===
          state.tabs[state.activedTabIndex].urls.length - 1
        ) {
          state.tabs[state.activedTabIndex].forward = false;
        }
      }
    },
  },
});

export const edgeAppActions = edgeAppSlice.actions;

export default edgeAppSlice;
